<template>
  <div>
    <div style="font-size: 20px; color: #333333;text-align: center;margin-top: -30px;margin-bottom: 30px;">
      提现
    </div>
    <div style="padding: 0 20px">
      <el-input v-model="money" placeholder="请输入您要提现的金额" @input="(v) => (money = v.replace(/[^\d]/g, ''))">
        <div slot="append" style="color: #333333;font-size: 18px;">元</div>
      </el-input>
      <!-- <el-input v-model="alipayAccount" placeholder="请输入您的支付宝账号" style="margin-top: 30px;">
      </el-input>
      <el-input v-model="phone" placeholder="请输入手机号码" @input="(v) => (phone = v.replace(/[^\d]/g, ''))"
        style="margin-top: 30px;">
            <el-button slot="append" @click="sendCode" :disabled="isSending || countdown > 0">
                {{ isSending ? '发送中...' : countdown > 0 ? `${countdown}秒后重试` : '发送验证码' }}
              </el-button>
      </el-input>
      <el-input v-model="code" placeholder="请输入验证码" @input="(v) => (code = v.replace(/[^\d]/g, ''))"
        style="margin:  30px 0" /> -->
      <div font-size="13px">
        开票资料：<br />
        公司名称：漳州趣故事信息技术有限公司<br />
        统一信用代码：91350602MA34B9JA38<br />
        地址：福建省漳州市龙文区新浦东路2号桂溪花园桂溪名都2108室<br />
        电话：18359646464<br />
        开户行：中国银行漳州分行<br />
        账号：432579488165
      </div>
      <div style="margin: 30px 0;">
        <div style="margin-bottom: 15px">电子发票：</div>
        <el-upload class="uploadTX" :headers="headers" drag name="image" :action="$baseURL + '/biz/uploadImgage'"
          multiple :on-success="handleTXSuccess" :show-file-list="false">
          <img v-if="einvoicing" :src="$staticURL + einvoicing" class="img-tx">
          <img v-else class="img-tx" src="@/assets/img/ad-up.png" />
        </el-upload>
      </div>

      <div class="agree_box">
        <el-checkbox v-model="checked" style="margin-right:4px;"></el-checkbox>
        同意<span @click="openUrl('https://yushiai.com.cn/FConvention?_id=1')">《服务协议》</span>和<span
          @click="openUrl('https://yushiai.com.cn/privacyPolicy')">《隐私政策》</span>
      </div>
      <div class="btnRR" @click="adUserWithdrow">立即提现</div>
      <div style="color: red;margin-top: 20px;">
        <div>注：</div>
        <div>1、提现填写的支付宝账号只能是当前登录账号实名认证的身份证号绑定的支付宝账号，其他身份证绑定的支付宝账号无效；</div>
        <div>2、提现时需支付平台服务费3%-6%（包含提现手续费，代扣税费），提现到账金额以实际到账的为准；</div>
      </div>
    </div>

  </div>
</template>

<script>
export default {
  name: "Withdrow",
  props: {},
  data() {
    return {
      checked: false,
      money: "",
      alipayAccount: '',
      einvoicing: '',
      // 手机号验证
      phone: '',
      code: '',
      isSending: false,
      countdown: 0,
      smsToken: '',
    };
  },

  mounted() {

  },

  watch: {

  },
  computed: {
    headers() {
      return {
        session_token: localStorage.getItem("adv_session_token"),
        // session_token: '',
      };
    }
  },
  methods: {
    handleTXSuccess(res, file) {
      console.log(res, file)
      if (res.code == 200) {
        this.einvoicing = res.data.imgageUrl
      } else {
        this.$message(res.msg)
      }
    },
    openUrl(url) {
      window.open(url)
    },
    async adUserWithdrow() {
      if (!this.checked) {
        this.$message('请先阅读协议！')
        return;
      }
      if (!this.money) {
        this.$message('请填写您要提现的金额')
        return;
      }
      // if (!this.alipayAccount) {
      //   this.$message('请填写您的支付宝账号')
      //   return;
      // }
      // if (!this.phone) {
      //   this.$message('请输入手机号码')
      //   return;
      // }
      
        (JSON.parse(localStorage.getItem('advertisementUserMes'))).contactPhone
        let res = await this.$API.members.adUserWithdrow({
          alipayAccount: (JSON.parse(localStorage.getItem('advertisementUserMes'))).contactPhone,
          einvoicing: this.einvoicing,
          money: this.money,
          phone: (JSON.parse(localStorage.getItem('advertisementUserMes'))).contactPhone,
          type: 2,
          
        }) 
      if (res.code == 200) {
        this.$message.success('提现订单已提交，正在审核中，请耐心等待！')
        this.$emit("successPay");
      } else {
        this.$message.error(res.msg)
      }

    },

    sendCode() {
      if (!this.phone) {
        this.$message('请输入手机号码')
        return;
      }
      if (this.countdown > 0 || this.isSending) {
        return; // 防止重复点击发送
      }
      // 假设在这个方法中实现发送验证码的逻辑
      // 可以调用sendVerificationCode()方法发送验证码
      // 这里只是简单模拟发送过程
      this.isSending = true;
      this.startCountdown();
      // setTimeout(() => {
      //   // 假设发送成功后将isSending重置为false
      //   this.isSending = false;
      // }, 2000); // 这里使用2秒的延迟来模拟发送过程，你需要替换为实际的发送逻辑
      this.sendSmsCode()
    },
    startCountdown() {
      this.countdown = 60;
      const timer = setInterval(() => {
        this.countdown--;
        if (this.countdown <= 0) {
          clearInterval(timer);
        }
      }, 1000);
    },

    async sendSmsCode() {
      let res = await this.$API.system.sendSmsCode({
        phone: this.phone
      })
      if (res.code == 200) {
        this.smsToken = res.data.smsToken;


        this.isSending = false;
        this.$message.success('验证码已发送，请注意查收')
      } else {
        this.$message.error(res.msg)
      }
    },

  },
  created() { },
};
</script>
<style lang="scss" scoped>
.agree_box {
  margin-top: 30px;

  span {
    color: #1B4187;
    cursor: pointer
  }
}

.btnRR {
  margin-top: 40px;
  // width: 300px;
  width: 100%;
  height: 46px;
  border-radius: 5px;
  background: rgba(255, 104, 178, 0.698);

  font-size: 18px;
  color: #FFFFFF;

  display: flex;
  align-items: center;
  justify-content: center;
}

.flex-column {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
}

.img-tx {
  width: 146px !important;
  height: 146px !important;
  // border-radius: 50%;
}

.uploadTX ::v-deep .el-upload .el-upload-dragger {
  width: 390px !important;
  height: 146px !important;
  // border-radius: 50% !important;
}
</style>
